import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import { Row, Col, Upload, Spin, Card, Button, Divider} from "antd";
import DescriptionList from '../../../components/DescriptionList';
import styles from '../../Pbulic.less';

const { Description } = DescriptionList;

@connect(({ repair, global }) => ({
  baseUrl:global.baseUrl,
  dictionaries:global.dictionaries,
  detaildata:repair.detaildata,
  loading:repair.loading.detailinfo,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    const { dispatch} = this.props;
    this.detailInfoId!=0 && dispatch({
      type: "repair/fetch_repair_info",
      payload: {
        repairId: this.detailInfoId
      }
    })
  }


  render() {
    const { detaildata, loading, dictionaries, baseUrl  } = this.props;

    const deviceType = dictionaries.deviceType && dictionaries.deviceType.length>1
      ? dictionaries.deviceType.map(item=>item.label)
      :[];

    const faultType = dictionaries.faultType && dictionaries.faultType.length>1
      ? dictionaries.faultType.map(item=>item.label)
      :[];


    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.repairId &&
          <Fragment>
          <Card bordered={false} loading={detaildata.repairId ? false : true}>
            {
              detaildata.devId &&
              <DescriptionList size="large" title="设备信息" style={{ marginBottom: 32 }}>
                <Description term="设备编号">{detaildata.devCode}</Description>
                <Description term="设备类型">{detaildata.devType && deviceType[parseInt(detaildata.devType)-1]}</Description>
                <Description term="品牌">{detaildata.trademark}</Description>
                <Description term="设备名称">{detaildata.devName}</Description>
                <Description term="设备型号">{detaildata.devModel}</Description>
                <Description term="供货商">{detaildata.supplier}</Description>
                <Description term="安装地点">{detaildata.pointName}</Description>
              </DescriptionList>
            }
            {
              detaildata.devId &&
              <Divider style={{ marginBottom: 32 }} />
            }

            <DescriptionList size="large" title="故障信息" style={{ marginBottom: 32 }}>
              <Description term="故障现象">{detaildata.faultType && faultType[parseInt(detaildata.faultType)-1]}</Description>
              <Description term="维保单位">{detaildata.maintenanceName}</Description>
              <Description term="联系人">{detaildata.linkman}</Description>
              <Description term="处理时限">{detaildata.handleTime} 小时</Description>
              <Description term="事件描述">{detaildata.faultDesc}</Description>
              <Description term="报修人">{detaildata.repairPersonName}</Description>
              <Description >
                {
                  detaildata.repairPhoto && detaildata.repairPhoto.length>0 &&
                  <Col span={24}>
                    <div >
                      <Upload
                        listType="picture-card"
                        fileList={detaildata.repairPhoto.map(item=>{
                          item.url = baseUrl+item.url;
                          return item;
                        })}
                        disabled={true}
                        // onPreview={this.handlePreview}
                      />
                    </div>
                  </Col>
                }
              </Description>
            </DescriptionList>
          </Card>
          </Fragment>
        }
      </Fragment>
    );
  }
}
